<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));

    class App extends React.Component {
        state = {
            index: 0,
            newsInfo:[]
        }

        render() {
            const {newsInfo,index} = this.state;
            return (
                <>
                    <h3>切换</h3>
                    {
                        newsInfo.map((item,i)=>(
                            <button onClick={()=>this.setState({index:i})} className={index===i?"active":""} key={i}>{item.newsType}</button>
                        ))
                    }
                    {
                        newsInfo.map((item,i)=>(
                            <div style={{display:i===index?"block":"none"}} key={i}>
                                {
                                    item.newsList.map(info=>(
                                        <p key={info.id}><a href={info.href}>{info.title}</a></p>
                                    ))
                                }
                            </div>
                        ))
                    }
                </>
            )
        }

        componentDidMount(){
            // 当组件挂载完毕之后会调用该函数
            const xhr = new XMLHttpRequest();
            xhr.responseType = "json";
            xhr.open('get',"./data/index.json");
            xhr.send();
            xhr.onload = ()=>{
                this.setState({
                    newsInfo:xhr.response
                })
            }
        }
    }

    root.render(<App/>)
</script>
</html>